<template>
  <component :is="statusMap[status].iconReader()"></component>
</template>
<script setup lang="ts">
import CeIcon from "@commons/components/ce-icon/index.vue";
import { h } from "vue";

defineProps<{
  status: string;
}>();

const statusMap = {
  creating: {
    iconReader: () => {
      return h(CeIcon, {
        class: "is-loading",
        code: "icon_testing",
        size: "14px",
        color: "#3370FF",
        style: "display:flex",
      });
    },
  },
  in_use: {
    iconReader: () => {
      return h("el-icon", { style: "display:flex" }, [
        h(
          "svg",
          {
            viewBox: "0 0 1024 1024",
            version: "1.1",
            style: "height:14px;width:14px",
            xmlns: "http://www.w3.org/2000/svg",
          },
          [
            h("path", {
              d: "M512 42.666667c259.2 0 469.333333 210.133333 469.333333 469.333333s-210.133333 469.333333-469.333333 469.333333S42.666667 771.2 42.666667 512 252.8 42.666667 512 42.666667zM383.573333 228.650667a31.018667 31.018667 0 1 0-53.461333 31.445333L640.426667 787.626667a31.018667 31.018667 0 1 0 53.461333-31.488z m407.68 108.8h-232.704a31.018667 31.018667 0 0 0 0 62.08h232.704v217.173333h-62.037333a31.018667 31.018667 0 0 0 0 62.08h62.037333c34.304 0 62.08-27.776 62.08-62.037333V399.530667c0-34.304-27.776-62.08-62.08-62.08z m-480.938666 0H232.746667C198.4 337.493333 170.666667 365.226667 170.666667 399.530667v217.173333c0 34.304 27.776 62.08 62.08 62.08h232.704a31.018667 31.018667 0 0 0 0-62.037333H232.746667V399.530667h77.568a31.018667 31.018667 0 0 0 0-62.08z m387.84 139.648H636.16a31.018667 31.018667 0 0 0 0 62.037333h62.08a31.018667 31.018667 0 0 0 0-62.037333z m-310.272 0H325.802667a31.018667 31.018667 0 1 0 0 62.037333h62.08a31.018667 31.018667 0 1 0 0-62.037333z",
              fill: "#3370FF",
            }),
          ]
        ),
      ]);
    },
  },
  available: {
    iconReader: () => {
      return h("el-icon", { style: "display:flex" }, [
        h(
          "svg",
          {
            viewBox: "0 0 1024 1024",
            version: "1.1",
            style: "height:14px;width:14px",
            xmlns: "http://www.w3.org/2000/svg",
          },
          [
            h("path", {
              d: "M42.666667 512c0 259.242667 210.090667 469.333333 469.333333 469.333333s469.333333-210.090667 469.333333-469.333333S771.242667 42.666667 512 42.666667 42.666667 252.757333 42.666667 512z",
              fill: "#34C724",
            }),
            h("path", {
              d: "M742.272 418.986667a29.312 29.312 0 0 0 0-41.514667l-20.736-20.736a29.354667 29.354667 0 0 0-41.514667 0l-233.173333 233.173333-86.528-86.485333a29.312 29.312 0 0 0-41.472 0l-20.736 20.736a29.312 29.312 0 0 0 0 41.472l124.416 124.458667a29.44 29.44 0 0 0 30.037333 7.082666 29.269333 29.269333 0 0 0 20.053334-8.533333l269.653333-269.653333z",
              fill: "#FFFFFF",
            }),
          ]
        ),
      ]);
    },
  },

  enlarging: {
    iconReader: () => {
      return h(
        "el-icon",
        { class: "el-icon is-loading", style: "display:flex" },
        [
          h(
            "svg",
            {
              viewBox: "0 0 1024 1024",
              version: "1.1",
              style: "height:14px;width:14px",
              xmlns: "http://www.w3.org/2000/svg",
            },
            [
              h("path", {
                d: "M512 42.666667c259.2 0 469.333333 210.133333 469.333333 469.333333s-210.133333 469.333333-469.333333 469.333333S42.666667 771.2 42.666667 512 252.8 42.666667 512 42.666667z m0 437.333333a32 32 0 0 0-32 32v50.986667H262.869333a32 32 0 0 0-32 32v166.101333c0 17.664 14.336 32 32 32h498.176a32 32 0 0 0 32-32v-166.058667a32 32 0 0 0-32-32h-217.130666L544 512a32 32 0 0 0-32-32z m217.045333 147.029333v101.973334H294.912v-101.973334h434.133333z m-452.266666-396.117333h-13.866667a32 32 0 0 0-32 32v13.824c0 15.232 10.624 27.946667 24.832 31.104a32 32 0 0 0-24.832 31.146667v13.866666c0 15.232 10.624 27.946667 24.832 31.104a32 32 0 0 0-24.832 31.146667v13.866667c0 17.664 14.336 32 32 32h13.824a32 32 0 0 0 14.634667-60.458667 31.701333 31.701333 0 0 0-21.290667-16.469333 32 32 0 0 0 24.832-31.146667v-13.866667a31.786667 31.786667 0 0 0-24.832-31.061333c9.301333-2.133333 17.066667-8.32 21.333333-16.597333a32 32 0 0 0-14.677333-60.458667z m484.266666 0h-13.781333a32 32 0 0 0-14.634667 60.458667c4.266667 8.277333 11.989333 14.421333 21.333334 16.469333a32 32 0 0 0-24.874667 31.146667v13.866666c0 15.232 10.624 27.946667 24.832 31.104a32 32 0 0 0-21.290667 16.554667 32 32 0 0 0 14.634667 60.458667h13.824l4.352-0.298667a32 32 0 0 0 27.648-31.701333V415.146667A31.786667 31.786667 0 0 0 768.256 384a32 32 0 0 0 24.832-31.146667v-13.866666a31.786667 31.786667 0 0 0-24.832-31.061334 32 32 0 0 0 24.832-31.232v-13.824a32 32 0 0 0-32-32z m-290.56 166.058667h-13.824a32 32 0 1 0 0 64h13.824a32 32 0 0 0 0-64z m-96.853333 0h-13.866667a32 32 0 0 0 0 64h13.866667a32 32 0 0 0 0-64z m193.706667 0h-13.824a32 32 0 1 0 0 64h13.824a32 32 0 0 0 0-64z m96.853333 0h-13.824a32 32 0 0 0 0 64h13.866667a32 32 0 0 0 0-64z m-290.56-166.058667h-13.866667a32 32 0 0 0 0 64h13.866667a32 32 0 0 0 0-64z m96.853333 0h-13.824a32 32 0 1 0 0 64h13.824a32 32 0 1 0 0-64z m96.853334 0h-13.824a32 32 0 1 0 0 64h13.824a32 32 0 1 0 0-64z m96.853333 0h-13.824a32 32 0 0 0 0 64h13.866667a32 32 0 0 0 0-64z",
                fill: "#3370FF",
              }),
            ]
          ),
        ]
      );
    },
  },
  ToBeRecycled: {
    iconReader: () => {
      return h(CeIcon, {
        code: "icon_retrieve",
        size: "14px",
        color: "#FF8800",
        style: "display:flex",
      });
    },
  },
  deleted: {
    iconReader: () => {
      return h(CeIcon, {
        code: "icon_deleting",
        size: "14px",
        color: "#6E748E",
        style: "display:flex",
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>
